<script setup>
import { ref, onMounted, watch } from "vue";
import { imgUploadVerify } from "@/utils/auth";
import { getAiImgRecordList } from "@/api/painting";
import { validateIsOpacity } from '@/utils/canvasHelp';
const props = defineProps({
  type: {
    type: Number,
    default: 0,
  },
  sizeType: {
    type: Array
  },
  imgType: String,
  sheetShow: Boolean,
});

const emits = defineEmits(["update:sheetShow", "click"]);

// const sheetShow = ref(false)
const popupShow = ref(false);
const active = ref({});

const actions = [
  { id: 1, name: "相册选择" },
  { id: 2, name: "绘图历史选择" },
];

// 绘画历史记录查询参数
const queryParams = ref({
  query: {
    type: props.type,
    page: 0,
  },
  flag: true,
  imgList: [],
});

// 定时器ID
let timeID;

// 关闭选择列表
const sheetOnClose = () => {
  // sheetShow.value = false
  emits("update:sheetShow", false);
};
// 关闭图片弹窗
const popupOnClose = () => {
  popupShow.value = false;
};

// 相册上传图片
const uploadFn = async () => {
  let req = {
    type: props.imgType
  }
  if (props.sizeType) {
    req.sizeType = props.sizeType;
  }
  let url;
  if (props.imgType) {
    url = await imgUploadVerify(req);
  } else {
    url = await imgUploadVerify();
  }

  let isPass = true;
  if (props.imgType && props.imgType == 'png') {
    let res = await validateIsOpacity({ filePath: url })
    isPass = res.isOpacity;

  }
  if (!isPass) {
    wx.showToast({
      title: '该图是非透明的，请选择png的透明背景图片',
      icon: 'none'
    })
    return;
  } else {
    emits("click", url);
  }


};

const onSelect = (e) => {
  if (e.detail.id === 2) {
    return (popupShow.value = true);
  }
  uploadFn();
};

const activeImgFn = (e) => {
  active.value = e.target.dataset;
  clearTimeout(timeID);
  confirm();
};

const confirm = () => {
  wx.getImageInfo({
    src: active.value.imgpath,
    success(res) {
      clearTimeout(timeID);
      emits("click", res.path);
      timeID = setTimeout(() => {
        popupShow.value = false;
      }, 400);
    },
  });
};

const getAiImgRecordListFn = async () => {
  if (queryParams.value.flag) {
    const res = await getAiImgRecordList(queryParams.value.query);
    if (queryParams.value.query.page === 0) {
      queryParams.value.imgList = res.data;
    } else {
      queryParams.value.imgList.push(...res.data);
    }
    if (res.data.length >= 10) {
      ++queryParams.value.query.page;
    } else {
      queryParams.value.flag = false;
    }
  }
};

const scrolltolower = () => {
  getAiImgRecordListFn();
};

onMounted(() => {
  getAiImgRecordListFn();
});
</script>

<template>
  <van-action-sheet z-index="600" :show="sheetShow" :actions="actions" @close="sheetOnClose" @select="onSelect"
    @cancel="sheetOnClose" cancel-text="取消" />
  <van-popup lock-scroll z-index="600" round :show="popupShow" custom-style="height: 60%;" position="bottom"
    @close="popupOnClose">
    <scroll-view class="scrollView" scroll-y enable-flex @click="activeImgFn" @scrolltolower="scrolltolower"
      v-if="queryParams.imgList.length">
      <div v-for="item of queryParams.imgList" class="imgBox">
        <img class="imgSty" :data-id="item.id" :data-imgPath="item.imgPath" :src="item.imgTempPath || item.imgPath"
          mode="aspectFill" alt="" />
        <div class="overlay" :class="{ active: active.id === item.id }"></div>
      </div>
    </scroll-view>

    <img v-else class="zwjlImg" src="@/assets/imgs/zwjl.png" alt="" mode="aspectFill" />
  </van-popup>
</template>

<style lang="less" scoped>
.scrollView {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  // align-items: center;
  justify-content: flex-start;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  padding: 0 30rpx;

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

  .imgBox {
    box-sizing: border-box;
    width: 335rpx;
    height: 448rpx;
    margin-top: 30rpx;
    position: relative;
    margin-right: 20rpx;

    &:nth-child(2n) {
      margin-right: 0;
    }

    .imgSty {
      width: 100%;
      height: 100%;
      border-radius: 24rpx;
      background-color: var(--a-main-box-bg-color);
    }
  }

  .overlay {
    position: absolute;
    left: -100%;
    bottom: -20rpx;
    width: 50rpx;
    height: 10rpx;
    background-color: var(--a-main-color);
    z-index: 500;
    transition: all 0.5s ease;
    /* 设置过渡效果，0.5秒完成，动画类型为ease */
    opacity: 0;
    border-radius: 24rpx;
  }

  .active {
    width: 50rpx;
    left: 50%;
    transform: translate(-50%);
    opacity: 1;
  }
}

.zwjlImg {
  display: block;
  width: 400rpx;
  height: 400rpx;
  transform: translate(0, 50%);
  margin: 0 auto;
}
</style>
